import { BubbleChartDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.BubbleChart);

## Usage

<Demo data={BubbleChartDemos.usage} />

## Change color

You can reference colors from [theme](/theming/theme-object) the same way as in
other components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS
color value is also accepted.

<Demo data={BubbleChartDemos.color} />

## Change area color depending on color scheme

You can use CSS variables in `color` property. To define a CSS variable that
changes depending on the color scheme, use [light/dark mixins](/styles/postcss-preset/#dark-and-light-mixins)
or [light-dark function](/styles/postcss-preset/#light-dark-function). Example
of area that is dark orange in light mode and lime in dark mode:

<Demo data={BubbleChartDemos.colorSchemeColor} />

## Remove tooltip

To remove tooltip, set `withTooltip={false}`. It also removes the cursor line
and disables interactions with the chart.

<Demo data={BubbleChartDemos.noTooltip} />

## Value formatter

To format values in the tooltip, use `valueFormat` prop. It accepts
a function that takes number value as an argument and returns formatted value:

<Demo data={BubbleChartDemos.valueFormatter} />

## Grid and text colors

Use `--chart-grid-color` and `--chart-text-color` to change colors of
grid lines and text within the chart. With [CSS modules](/styles/css-modules/), you can change colors
depending on color scheme:

<Demo data={BubbleChartDemos.gridColor} />

If your application has only one color scheme, you can use `gridColor` and `textColor`
props instead of CSS variables:

```tsx
import { BubbleChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <BubbleChart
      gridColor="gray.5"
      textColor="gray.9"
      h={60}
      data={data}
      range={[16, 225]}
      label="Sales/hour"
      color="lime.6"
      dataKey={{ x: 'hour', y: 'index', z: 'value' }}
    />
  );
}
```
